<template>
	<z-paging ref="paging" :auto-clean-list-when-reload="false" :auto-scroll-to-top-when-reload="false"
		v-model="dataList" @query="queryList" :default-page-size='pageSizeCount' :default-page-no='0'>
		<template>
			<view class="topView zsConter">
				{{albumNmae}}
			</view>
		</template>
		<view class="flex-row" style="flex-wrap: wrap; padding: 10px;">
			<view  @click="clickItem(index)" v-for="(item,index) in dataList" :key="index">
				<ImageCell :dataModel="item"></ImageCell>
			</view>
		</view>

	</z-paging>
</template>

<script>
	import ZSSwiper from '../../components/zs-swiper/zs-swiper.vue'
	import ImageCell from '../../components/gif-image-cell/gif-image-cell.vue'
	export default {
		components: {
			ZSSwiper,
			ImageCell
		},
		data() {
			return {
				dataList: [],
				typeList:[],
				pageSizeCount:20,
				albumNmae:'',
				pageNo:0
			}
		},
		onLoad(option) {
			this.albumNmae = option.albumNmae
			console.log('albumNmae==',option);
		},
		methods: {
			queryList(pageNo, pageSize) {
			this.pageNo = pageNo;
			this.getData(pageNo);
			},
			getData(pageNo){
				this.$uniCloudApi.get_album_list('0',this.albumNmae,pageNo,this.pageSizeCount).then((res) => {
					this.$refs.paging.complete(res);
				}).catch(err => {
					this.$refs.paging.complete([]);
					this.errStr = err.toString();
					uni.showToast({
						title: err.toString(),
						icon: 'none'
					})
				})
			},
			clickItem(index){
				var item = this.dataList[index]
				var type = this.typeValue
				var model = {
					'imageUrl':item.imageUrl,
					'tableType':2,
					'type':type,
					"pageSizeCount":this.pageSizeCount,
					"albumNmae":this.albumNmae,
					'pageNo':this.pageNo,
					"isAlbum":true
				}
				uni.navigateTo({
					url: '../details-page/details-page?model=' + this.$encodeJson(model)
				});
			}
		}
	}
</script>

<style lang="scss">
	.topView{
		background-color: rgb(245, 245, 245);
		padding: 15px;
		font-size: 16px;
		font-weight: bold;
		border-radius: 10px;
		margin: 10px 10px;
	}
</style>